import { Tab, Tabs } from "nextra-theme-docs";
import { Steps } from "nextra/components";

# Get started with `twc`

<Steps>
### Install package

```sh npm2yarn
npm i react-twc
```

### Setup autocompletion in your editor

You can enable Tailwind CSS autocompletion inside `twc` using the steps below:

<Tabs items={["Visual Studio Code", "Neovim", "WebStorm"]}>
  <Tab>

    1. [Install the "Tailwind CSS IntelliSense" Visual Studio Code extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)

    2. Add the following to your [`settings.json`](https://code.visualstudio.com/docs/getstarted/settings):

    ```json
    "tailwindCSS.experimental.classRegex": [
        "twc\\.[^`]+`([^`]*)`", 
        "twc\\([^`]*?\\)`([^`]*)`",
        ["twc\\.[^`]+\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
        ["twc\\([^`]*?\\).*?\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
    ]
    ```

  </Tab>
  <Tab>

    1. [Install the extension](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#tailwindcss)

    2. Add the following configuration:

    ```lua
    require 'lspconfig'.tailwindcss.setup({
      settings = {
        tailwindCSS = {
          experimental = {
            classRegex = {
              "twc\\.[^`]+`([^`]*)`",
              "twc\\(.*?\\).*?`([^`]*)",
              { "twc\\.[^`]+\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)" },
              { "twc\\(.*?\\).*?\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)" }
            },
          },
        },
      },
    })
    ```

  </Tab>
  <Tab>

    1. Check the version. Available for [WebStorm 2023.1](https://www.jetbrains.com/webstorm/whatsnew/#version-2023-1-tailwind-css-configuration) and later

    2. Open the settings. Go to [Languages and Frameworks | Style Sheets | Tailwind CSS](https://www.jetbrains.com/help/webstorm/tailwind-css.html#ws_css_tailwind_configuration)

    3. Add the following to your tailwind configuration

    ```json
    {
      "experimental": {
        "classRegex": [
          "twc\\.[^`]+`([^`]*)`",
          "twc\\(.*?\\).*?`([^`]*)",
          ["twc\\.[^`]+\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
          ["twc\\(.*?\\).*?\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
        ]
      }
    }
    ```

  </Tab>
</Tabs>

### Create reusable components

Import `twc` and create a component using `twc.div`, where `div` stands to the tag name of the component you want to create.

```tsx filename="card.tsx"
import { twc } from "react-twc";

export const Card = twc.div`rounded-lg border bg-slate-100 text-white shadow-sm`;
```

Then you can use your component in your app:

```tsx filename"app.tsx"
import { Card } from "./card";

function App() {
  return <Card>Hello world!</Card>;
}
```

</Steps>
